<template>
	<li
		@mouseenter="isEnter = true"
		@mouseleave="isEnter = false"
		:class="isEnter ? 'active' : ''"
	>
		<label>
			<input type="checkbox" :checked="done" @change="singleChange(id)" />
			<span>{{ thing }}</span>
		</label>
		<button class="btn btn-danger" @click="singleDelete(index)">删除</button>
	</li>
</template>

<script>
export default {
	name: "Item",
	props: ["id", "thing", "done", "singleChange", "singleDelete", "index"],
	data() {
		return {
			isEnter: false,
		};
	},
};
</script>

<style>
/*item*/
li {
	list-style: none;
	height: 36px;
	line-height: 36px;
	padding: 0 5px;
	border-bottom: 1px solid #ddd;
}

li label {
	float: left;
	cursor: pointer;
}

li label li input {
	vertical-align: middle;
	margin-right: 6px;
	position: relative;
	top: -1px;
}

li .btn {
	float: right;
	display: none;
	margin-top: 3px;
}

li:before {
	content: initial;
}

li:last-child {
	border-bottom: none;
}

li.active {
	background: #ccc;
}

li.active button {
	display: block;
}
</style>
